<template>
  <div id="logintwo">
    <div class="avue-home" v-if="loading" style="z-index: 99;">
      <div class="avue-home__main">
        <img class="avue-home__loading" src="../assets/loading-spin.svg" alt="loading">
        <div class="avue-home__title">
          努力加载中...
        </div>
      </div>
    </div>

    <div style="display: flex;width: 100%;height: 100%;overflow: hidden;">
      <!--      <div class="name">全球豪车信息共享系统</div>-->
      <div class="login-modal">
        <div class="title">登录</div>
        <el-form class="login-form"
                 :rules="loginRules"
                 ref="loginForm"
                 :model="loginForm"
                 label-width="0">

          <el-form-item prop="username">
            <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                v-model="loginForm.username">
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
                :type="passwordType"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                v-model="loginForm.password">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-row :span="24">
              <el-col :span="12">
                <el-checkbox v-model="loginForm.rememberPwd">记住密码</el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-popover
                    placement="top-start"
                    title=""
                    width="200"
                    trigger="hover"
                    content="忘记密码请联系系统管理员">
                  <span style="color: #1890ff;float: right;" slot="reference">忘记密码</span>
                </el-popover>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       style="width: 100%;"
                       @click.native.prevent="handleLogin"
                       class="login-submit">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      passwordType: "password",
      loginForm: {
        //用户名
        username: "",
        //密码
        password: "",
        rememberPwd: false,
      },
      loginRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 1, message: "密码长度最少为6位", trigger: "blur"}
        ]
      },
    }
  },
  mounted() {
    let that = this;
    setTimeout(function(){
      that.loading = false;
    },500);
  },
  methods: {
    showPassword() {
      this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中,请稍后。。。',
            spinner: "el-icon-loading"
          });
          //loading.close();
        }
      });
    },
  }
}
</script>


<style scoped>
#logintwo{
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("../assets/preview.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  overflow: auto;
  position: fixed;
  line-height: 100%;
}
.logo{
  width: auto;
  height: 60px;
  display: flex;
  overflow: hidden;
  background-color: #1fb494;
}
.logo img{
  width: 32px;
  height: 32px;
  margin: 14px 10px 0 15px;
}
.logo .title{
  font-size: 16px;
  text-overflow: ellipsis;
  color: white;
  line-height: 61px;
}
.top-box{
  height: 60px;
  display: flex;
  background-color: #1fb494;
}
.top-box-i{
  width: 32px;
  height: 32px;
  font-size: 24px;
  margin: 16px 10px 0 15px;
  color: #FFFFFF;
}

.avue-home {
  /*background-color: #303133;*/
  background-color: rgba(39, 51, 59, 1.0);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.avue-home__main {
  user-select: none;
  width: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.avue-home__footer {
  width: 100%;
  flex-grow: 0;
  text-align: center;
  padding: 1em 0;
}

.avue-home__footer>a {
  font-size: 12px;
  color: #ABABAB;
  text-decoration: none;
}

.avue-home__loading {
  height: 32px;
  width: 32px;
  margin-bottom: 20px;
}

.avue-home__title {
  color: #FFF;
  font-size: 14px;
  margin-bottom: 10px;
}

.avue-home__sub-title {
  color: #ABABAB;
  font-size: 12px;
}

::-webkit-scrollbar{
  width: 7px;
  height: 7px;
  display: none;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(39, 51, 59, 1.0);

}
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
a{
  color: #FFFFFF;
  text-decoration: none;
}
/*body{*/
/*  background-size: 100% 100%;*/
/*  background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../assets/0003.jpeg");*/
/*  background-repeat: no-repeat;*/
/*}*/
.name{
  line-height: 50px;
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
  margin-left: 10px;
}
.login-modal{
  position: relative;
  width: 420px;
  height: 450px;
  margin: 0 auto;
  top: 50%;
  margin-top: -225px;
  background-color: #FFFFFF;
  border-radius: 5px;
}
.title{
  height: 100px;
  line-height: 100px;
  font-weight: 650;
  text-align: center;
  font-size: 28px;
}
.login-form{
  margin: 20px 40px;
}
</style>


